<template>
  <div class="grid_cont" v-loading="loading" element-loading-text="Loading...">
    <div style="display:flex;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 16px;line-height: 16px;">详情</div>
    </div>
    <div style="width: 100%;height: 1px;background-color:rgba(245,245,245,1);margin-top:16px;margin-bottom:30px;">
    </div>
    <!-- 个人基本信息 -->
    <div style="display:flex;margin-left:30px;margin-bottom:20px;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 15px;line-height: 16px;">个人基本信息</div>
    </div>
    <el-form :model="formParams" style="margin-left:24px;text-align:right;" label-width="142px">
      <el-form-item label="姓名：" prop="name">
        <el-input disabled v-model="formParams.name" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio-group disabled v-model="formParams.sex">
          <el-radio label='1'>男</el-radio>
          <el-radio label='2'>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="身份证号：" prop="idNumber">
        <el-input disabled v-model="formParams.idNumber" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="出生日期：" prop="birthDate">
        <el-date-picker disabled v-model="formParams.birthDate" format="YYYY-MM-DD" type="date" placeholder="选择日期"
          style="width: 500px;" />
      </el-form-item>
      <el-form-item label="民族：" prop="nation">
        <el-input disabled v-model="formParams.nation" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="籍贯：" prop="address">
        <el-input disabled v-model="formParams.address" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="学历：" prop="degree">
        <el-input disabled v-model="formParams.degree" style="width: 500px;" placeholder="暂无" />
      </el-form-item>
      <el-form-item label="联系电话：" prop="telephone">
        <el-input disabled v-model="formParams.telephone" style="width: 500px;" placeholder="暂无" />
      </el-form-item>
    </el-form>
    <!-- 党员信息 -->
    <div style="display:flex;margin-left:30px;margin-bottom:20px;">
      <div style="width: 3px;height: 18px;background-color: rgba(204,53,47,1);"></div>
      <div style="margin-left:10px;font-size: 15px;line-height: 16px;">党员信息</div>
    </div>
    <el-form :model="formParams" style="margin-left:24px;text-align:right;" label-width="142px">
      <el-form-item label="党员类型：" prop="memberType">
        <el-input disabled v-model="formParams.memberType" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="所属党支部：" prop="belongBranch">
        <el-input disabled v-model="formParams.belongBranch" style="width: 500px;" placeholder="暂无" />
      </el-form-item>
      <el-form-item label="党内职务：" prop="title">
        <el-input disabled v-model="formParams.title" style="width: 500px;" placeholder="暂无" />
      </el-form-item>
      <el-form-item label="转为预备党员日期：" prop="unofficialMemberTime">
        <el-date-picker disabled v-model="formParams.unofficialMemberTime" format="YYYY-MM-DD" type="date"
          placeholder="暂无" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="转为正式党员日期：" prop="officialMemberTime">
        <el-date-picker disabled v-model="formParams.officialMemberTime" format="YYYY-MM-DD" type="date"
          placeholder="暂无" style="width: 500px;" />
      </el-form-item>
      <el-form-item label="照片：" prop="photoUrl">
        <UploadImg v-if="formParams.photoUrl" disabled v-model="formParams.photoUrl" :limit="1" />
        <el-upload v-else disabled class="avatar-uploader" style="position:relative">
          <el-icon disabled class="avatar-uploader-icon" />
          <div style="position:absolute;cursor: not-allowed;user-select: none;color: #999;">暂无照片</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="住址：" prop="homeAddress">
        <el-input disabled v-model="formParams.homeAddress" maxlength="100" style="width: 500px;" placeholder="暂无"
          show-word-limit type="textarea" />
      </el-form-item>
    </el-form>
  </div>
  <div class="grid_cont2">
    <el-button class="grid_btn" @click="detailsbtn">返回</el-button>
  </div>
</template>

<script lang="ts" setup>
const { push } = useRouter() // 路由
const route = useRoute()
import partyManageApi from '@/api/spb/organizationManage/partyManage'
import globalApi from '@/api/spb/global'
const formParams = reactive({
  name: '',
  sex: '1',
  idNumber: '',
  birthDate: '',
  nation: '',
  address: '',
  degree: '',
  telephone: '',
  memberType: '',
  belongBranch: '',
  title: '',
  unofficialMemberTime: '',
  officialMemberTime: '',
  photoUrl: '',
  homeAddress: ''
})
const loading = ref(true) // 列表加载中
const optionDegree = ref([])
const optionType = ref([])
const optionnation = ref([])
const isDataLoaded = ref(false);  
/** 获取党员学历列表 */
const getDegreeTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_degree'
  }
  globalApi.getDictData(params).then((res) => {
    res.list.forEach((item) => {
      optionDegree.value.unshift({
        label: item.label,
        value: parseInt(item.value)
      })
    })
  })
}

// 学历字段映射
const DegreetypeRelate = (item) => {
  let content = ''
  optionDegree.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
/** 获取民族类型列表 */
const getnationTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_nation'
  }
  globalApi.getDictData(params).then((res) => {
    res.list.forEach((item) => {
      optionnation.value.unshift({
        label: item.label,
        value: parseInt(item.value)
      })
    })
  })
}
// 民族类型字段映射
const nationtypeRelate = (item) => {
  let content = ''
  optionnation.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}
/** 获取党员类型列表 */
const gettypeTypeData = () => {
  const params = {
    pageNo: 1,
    pageSize: 100,
    dictType: 'countryside_party_member_type'
  }
  globalApi.getDictData(params).then((res) => {
    res.list.forEach((item) => {
      optionType.value.unshift({
        label: item.label,
        value: parseInt(item.value)
      })
    })
  })
}
// 党员类型字段映射
const typeRelate = (item) => {
  let content = ''
  optionType.value.forEach((t) => {
    if (t.value == item) {
      content = t.label
    }
  })
  return content
}

// 等待所有字典数据加载的函数  
const waitForData = () => {  
  return new Promise<void>(resolve => {  
    const interval = setInterval(() => {  
      if (optionDegree.value.length > 0 && optionnation.value.length > 0 && optionType.value.length > 0) {  
        clearInterval(interval) 
        isDataLoaded.value = true
        resolve()
      }  
    }, 100) 
  })
}

/** 返回 */
const detailsbtn = () => {
  push({
    name: 'partyManage',
  })
}
const getData = async () => {
  await waitForData()
  partyManageApi.getPartyManagedetail(route.query.id).then((res) => {
    formParams.memberType = typeRelate(res.memberType)
    formParams.nation = nationtypeRelate(res.nation)
    formParams.degree = DegreetypeRelate(res.degree)
    formParams.name = res.name
    formParams.sex = JSON.stringify(res.sex)
    formParams.idNumber = res.idNumber
    formParams.birthDate = String(res.birthDate)
    if (res.address=='') {
      formParams.address = "暂无"
    } else {
      formParams.address = res.address
    }
    formParams.telephone = res.telephone
    formParams.belongBranch = res.belongBranch
    formParams.title = res.title
    formParams.unofficialMemberTime = String(res.unofficialMemberTime)
    formParams.officialMemberTime = String(res.officialMemberTime)
    formParams.photoUrl = res.photoUrl
    formParams.homeAddress = res.homeAddress
    loading.value = false
  }).catch((error) => {
    loading.value = false
  })
}
// onMounted(async () => {  
//   getDegreeTypeData() 
//   getnationTypeData()
//   gettypeTypeData()
//   await getData()
// })
onMounted(async () => {
  await Promise.all([
    getnationTypeData(),
    gettypeTypeData(),
    getDegreeTypeData()
  ])
  await getData()
})

</script>
<style scoped>
.grid_cont {
  min-height: 600px;
  background: #fff;
}

.grid_cont2 {
  width: 100%;
  background: #fff;
  height: 65px;
  justify-Content: center;
  align-items: center;
  display: flex;
  padding: 0;
  box-shadow: 0px -2px 6px 0px rgba(188, 188, 188, 0.65);
}

.grid_btn {
  width: 80px;
  height: 30px;
  background-color: #FF9900;
  border: none;
  color: #fff;
}

.grid_btn:hover {
  opacity: 0.8;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .avatar-uploader .el-upload {
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  cursor: not-allowed;
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
}

.inputstyle {
  width: 257px;
  height: 28px;
  line-height: 28px;
  color: var(--el-disabled-text-color);
  -webkit-text-fill-color: var(--el-disabled-text-color);
  cursor: not-allowed;
  background-color: var(--el-disabled-bg-color);
  box-shadow: 0 0 0 1px var(--el-disabled-border-color);
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  padding: 1px 11px;
  text-align: left;
}
</style>